<template>
  <div class="createPost-container">
    <el-form :model="postForm" class="form-container">
      <div class="createPost-main-container">
        <el-row>
          <el-col :span="24">
            <div class="postInfo-container">
              <fieldset class="fieldInfo">
                <!-- <legend>
                  <span>预览检查表内容</span>
                </legend>-->

                <el-row>
                  <el-col :span="24" style="text-align: center;">
                    <b>{{postForm.paper.paperName}}</b>
                  </el-col>
                  <el-col :span="24" style="text-align: center;">
                    <div style="overflow: hidden;padding-left: 42%;padding-top:10px">
                      <el-form-item
                        label-width="105px"
                        class="postInfo-container-item"
                        label="检查参与人"
                      >
                        <el-input readonly="readonly"></el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="24" v-for="item of postForm.content" :key="item.index">
                    <el-form-item label-width="10px">
                      <b>{{item.id}}、{{item.indicatorContent}}</b>
                    </el-form-item>
                    <el-col :span="24" v-for="child of item.children" :key="child.index">
                      <el-form-item label-width="30px">
                        <b>{{item.id}}.{{child.id}} {{child.indicatorContent}}</b>
                        <el-row>
                          <el-col :span="5">
                            <div class="grid-content bg-purple">
                              <el-checkbox :disabled="true">合格</el-checkbox>
                            </div>
                          </el-col>
                          <el-col :span="5">
                            <div class="grid-content bg-purple-light">
                              <el-checkbox @change="chooseSelected(item,0)" :disabled="true">不合格</el-checkbox>
                            </div>
                          </el-col>
                          <el-col :span="14">
                            <div class="grid-content bg-purple">
                              <el-input
                                type="textarea"
                                :rows="2"
                                :readonly="true"
                                placeholder="问题描述"
                                v-model="child.checkComment"
                              ></el-input>
                            </div>
                          </el-col>
                        </el-row>
                      </el-form-item>
                    </el-col>
                  </el-col>
                </el-row>
              </fieldset>
              <el-row>
                <el-col :span="24">
                  <el-form-item style="text-align: center;">
                    <el-button>取消</el-button>
                    <el-button type="primary" @click="closeCurrentTag">关闭</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
// import MDinput from '@/components/MDinput'
import { validURL, validUsername } from '@/utils/validate'
import { searchUser } from '@/api/remote-search'
import { lookTable } from '@/api/checktable'

const defaultForm = {
  status: 'draft',
  id: undefined
}

export default {
  name: 'UserDetail',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const validateRequire = (rule, value, callback) => {
      if (value === '') {
        this.$message({
          message: rule.field + '为必传项',
          type: 'error'
        })
        callback(new Error(rule.field + '为必传项'))
      } else {
        callback()
      }
    }

    const addTable = {
      tableName: '',
      target: '',
      score: ''
    }
    return {
      postForm: Object.assign({}, addTable),
      loading: false,

      tempRoute: {},

      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  created() {
    if (this.isEdit) {
      //如果是编辑数据
      const id = this.$route.params && this.$route.params.id
      this.fetchData(id)
    }
    this.tempRoute = Object.assign({}, this.$route)
  },
  methods: {
    //根据id获取用户数据信息
    fetchData(id) {
      console.log('滴滴滴', id)
      var parse = {
        paper_id: id
      }
      lookTable(parse)
        .then((response) => {
          console.log('xixi', response)
          if (response.success) {
            this.postForm = response.data

            this.setTagsViewTitle()

            // set page title
            this.setPageTitle()
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    setTagsViewTitle() {
      const title = '预览检查表内容'
      console.log('postForm')
      const route = Object.assign({}, this.tempRoute, {
        title: `${title}-${this.postForm.paper.id}`
      })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    setPageTitle() {
      const title = '预览检查表内容'
      document.title = `${title} - ${this.postForm.id}`
    },
    closeCurrentTag() {
      // 调用全局挂载的方法
      this.$store.dispatch('tagsView/delView', this.$route)
      // 返回上一步路由
      this.$router.go(-1)
    },
    submitForm() {
      console.log(this.postForm)
      this.$refs.postForm.validate((valid) => {
        if (valid) {
          this.loading = true
          this.$notify({
            title: '成功',
            message: '新增用户成功',
            type: 'success',
            duration: 2000
          })
          this.postForm.status = 'published'
          this.loading = false
        } else {
          console.log('error submit!!')
          this.$notify({
            title: '失败',
            message: '新增用户失败',
            type: 'error',
            duration: 2000
          })
          return false
        }
      })
    },
    // draftForm() {
    //   if (
    //     this.postForm.content.length === 0 ||
    //     this.postForm.title.length === 0
    //   ) {
    //     this.$message({
    //       message: '请填写必要的标题和内容',
    //       type: 'warning'
    //     })
    //     return
    //   }
    //   this.$message({
    //     message: '保存成功',
    //     type: 'success',
    //     showClose: true,
    //     duration: 1000
    //   })
    //   this.postForm.status = 'draft'
    // },
    // getRemoteUserList(query) {
    //   searchUser(query).then((response) => {
    //     if (!response.data.items) return
    //     this.userListOptions = response.data.items.map((v) => v.name)
    //   })
    // },
    handleOrganizationNodeClick(node) {
      // console.log(node, 'node')
      this.postForm.organization.name = node.label
      this.postForm.organization.key = node.label
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';

.createPost-container {
  position: relative;

  .createPost-main-container {
    padding: 5px 45px 20px 50px;

    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
    }
  }
}

.fieldInfo {
  border-color: #eee;
  border-width: 1px;
  border-style: solid;
  margin-bottom: 20px;
  legend {
    color: #666;
  }
}
</style>
